<template>
  <div class="page-container">
    <div class="page-top-bar">
      <div
        class="page-top-bar-wrap"
        v-for="(item, index) in barList"
        :key="index"
        @click="handelBar(item.func)"
      >
        <div class="page-top-bar-wrap-item-wrapper">
          <svg-icon class="bar-icon" :icon="item.icon" />
          <span class="bar-title">{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="page-search">
      <div class="page-search-type">
        <span>类型：</span>
        <span class="type active-type">所有文件</span>
        <span class="type">安全看板</span>
        <span class="type">质量看板</span>
      </div>
    </div>
    <div class="page-list">
      <div class="page-file-box" v-for="(item, index) in pageList" :key="index">
        <div class="page-file-img" @click="editPage(item)">
          <img src="@/assets/images/暂无图表数据.png" alt="" />
        </div>
        <div class="page-file-title">
          <svg-icon class="title-icon" icon="goods" />
          <div class="title-name-info">
            <span class="name">{{ item.pageName }}</span>
            <span class="time">创建日期：{{ item.createDate }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      select: "1",
      dataList: [
        {
          value: "1",
          label: "label1",
        },
        {
          value: "2",
          label: "label2",
        },
      ],
      barList: [
        {
          name: "新建页面",
          icon: "new-file",
          func: "newFile",
        },
        {
          name: "导入配置文件",
          icon: "upload-file",
          func: "uploadFile",
        },
      ],
      pageList: [
        {
          pageId: "PG1662434086938",
          pageName: "新建页面",
          createDate: "2022-3-21",
        },
        {
          pageId: "PG1662434086939",
          pageName: "测试",
          createDate: "2022-3-21",
        },
      ],
    };
  },
  methods: {
    // 编辑页面
    editPage(item) {
      this.$router.push({
        name: "Design",
        query: {
          pageId: item.pageId,
          name: item.pageName,
        },
      });
    },
    handelBar(name) {
      let _this = this;
      const fun = {
        newFile,
      };
      function newFile() {
        _this.pageList.push({
          pageId: _this.$methods.uuid(),
          pageName: "测试",
          createDate: "2022-3-21",
        });
      }

      return fun[name]();
    },
  },
};
</script>

<style lang="scss" scoped>
.page-list {
  width: 100%;
  height: calc(100vh - 186px);
  overflow-x: auto;
  display: grid;
  grid-template-columns: repeat(3, 32%);
  grid-auto-rows: 280px;
  grid-gap: 16px;
  
  &::-webkit-scrollbar {
    display: none;
  }

  .page-file-box {
    width: 100%;
    height: 280px;
    transition: all 0.58s ease-in-out;

    .page-file-img {
      width: 100%;
      height: 224px;
      border: 1px solid var(--border-color);
      border-radius: 6px;
      transition: all 0.58s ease-in-out;
      display: flex;
      justify-content: center;
      align-items: center;

      & img {
        height: 200px;
      }

      .kanban-icon {
        width: 224px;
        height: 224px;
      }
    }

    .page-file-title {
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .title-icon {
        width: 32px;
        height: 32px;
        margin-right: 6px;
      }
      .title-name-info {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          font-size: 16px;
          color: var(--color);
        }

        .time {
          font-size: 12px;
          color: #666;
        }
      }
    }

    &:hover {
      .page-file-img {
        border-color: #459eff;
      }
    }
  }
}

.page-search {
  width: 100%;
  margin: 24px 0px;

  .page-search-type {
    font-size: 14px;
    color: #555557;
    display: flex;
    align-items: center;

    .type {
      padding: 4px 16px;
      margin-right: 12px;
      border-radius: 20px;
      background: rgb(242, 242, 242);
      color: rgb(31, 41, 46);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.1s ease-in-out 0s;

      &:hover {
        background: #459eff;
        color: #fff;
      }
    }

    .active-type {
      background: #459eff;
      color: #fff;
    }
  }
}
// 页面配置按钮
.page-top-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;

  .page-top-bar-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 25%;
    max-width: 325px;
    padding: 0 10px;
    height: 56px;
    margin-right: 16px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    transition: background 0.15s ease-out, border 0.15s ease-out;

    .page-top-bar-wrap-item-wrapper {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      color: var(--font-hover);
    }

    .bar-icon {
      width: 32px;
      height: 32px;
    }

    .bar-title {
      margin: 0 8px;
      font-size: 14px;
    }

    &:hover {
      background-color: var(--background-hover);
      border-color: var(--border-color);
      cursor: pointer;
    }
  }
}
</style>